<!--
 * @Author: Aaron
 * @Date: 2022-02-18 10:02:44
 * @LastEditors: Aaron Huang
 * @LastEditTime: 2022-10-19 16:34:28
 * @Description: file content
 * @FilePath: \ias_ui\src\views\coi\components\SwitchingTable.vue
 * @Company: 沃尔玛
-->
<template>
  <div v-loading="loading" class="switchingTable">
    <div v-if="btnList.length" class="checkComponent">
      <el-radio-group :value="value" size="mini" @input="input">
        <el-radio-button v-for="item in btnList" :key="item.id" :label="item.id" name="xxx">
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <div style="flex: 1; overflow: auto">
      <slot @changeLoading="changeLoading" />
    </div>
  </div>
</template>

<script>
import bus from '@/utils/eventBus.js'

export default {
  name: 'SwitchingTable',
  prop: {
    tabKey: {
      type: String,
      default: 'tab'
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    componentList: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {
    btnList() {
      const arr = this.componentList.filter((_) => {
        return !_.hidden
      })
      return arr.length > 1 ? arr : []
    }
  },
  activated() {
    const componentName = this.$route.params.tab
    const isHas = this.componentList.find((_) => _.id === componentName)
    if (componentName && isHas) this.input(componentName)
  },
  created() {
    bus.$on('changeLoading', this.changeLoading)
  },
  methods: {
    changeLoading(v) {
      this.loading = v
    },
    input(v) {
      this.$emit('change', v)
    }
  }
}
</script>

<style lang="scss" scoped>
.switchingTable {
  display: flex;
  flex-direction: column;
  height: 100%;
  .checkComponent {
    padding: 5px 20px;
  }
}
</style>
